<template>
  <div class="header-container">
    <!-- 页面加载时logo动画 -->
    <transition name="logo" appear class="animate__animated" enter-active-class="animate__backInDown">
      <router-link to="/home">
        <img class="logo" src="@/assets/logo.png" alt="logo">
      </router-link>
    </transition>
    <!-- pc导航 -->
    <div class="nav" v-if="showNav">
      <ul class="content">
        <li>
          <router-link to="/home" active-class="nav-active">首页</router-link>
        </li>
        <li>
          <router-link to="/product" active-class="nav-active">产品中心</router-link>
        </li>
        <li>
          <router-link to="/new" active-class="nav-active">新闻动态</router-link>
        </li>
        <li @mouseleave="leaveAbout">
          <router-link to="/about" active-class="nav-active" :class="{ 'nav-active': showList }"
            @mouseenter="enterAbout">关于昨非</router-link>
          <transition name="dropDownList">
            <ul class="about-list" v-show="showList">
              <li @click="navRouterJump('compile')">公司简介</li>
              <li @click="navRouterJump('core')">核心价值观</li>
              <li @click="navRouterJump('history')">发展历程</li>
            </ul>
          </transition>
        </li>
        <li>
          <router-link to="/contact" active-class="nav-active">联系我们</router-link>
        </li>
      </ul>
    </div>
    <div v-if="!showNav" @click="handleMenu" class="menu-button">
      <svg :class="{ 'menu-button-hover': showMobileNav, 'menu-button-unhover': !showMobileNav }" t="1700555299644"
        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11327" width="34"
        height="34">
        <path
          d="M992 236.8H32c-19.2 0-32-19.2-32-38.4s12.8-32 32-32h953.6c19.2 0 32 12.8 32 32s-6.4 38.4-25.6 38.4zM992 531.2H32c-19.2 0-32-12.8-32-32s12.8-32 32-32h953.6c19.2 0 32 12.8 32 32s-6.4 32-25.6 32zM992 832H32c-19.2 0-32-12.8-32-32s12.8-32 32-32h953.6c19.2 0 32 12.8 32 32 6.4 19.2-6.4 32-25.6 32z"
          p-id="11328" fill="#666666"></path>
      </svg>
    </div>
  </div>
  <!-- 移动端导航 -->
  <transition name="mobileNav">
    <div class="mobile-nav" v-show="showMobileNav">
      <ul>
        <li>
          <router-link to="/home" active-class="mobile-nav-hover" @click="navRouterJump">首页</router-link>
        </li>
        <li>
          <router-link to="/product" active-class="mobile-nav-hover" @click="navRouterJump">产品中心
          </router-link>
        </li>
        <li>
          <router-link to="/new" active-class="mobile-nav-hover" @click="navRouterJump">新闻动态</router-link>
        </li>
        <li>
          <el-collapse>
            <el-collapse-item title="关于昨非">
              <ul class="inside-nav">
                <li>
                  <router-link to="/about" :class="{ 'mobile-nav-hover': showCompile }"
                    @click="navRouterJump('compile')">-- 公司简介</router-link>
                </li>
                <li>
                  <router-link to="/about" :class="{ 'mobile-nav-hover': showCore }" @click="navRouterJump('core')">--
                    核心价值观</router-link>
                </li>
                <li>
                  <router-link to="/history" :class="{ 'mobile-nav-hover': showHistory }"
                    @click="navRouterJump('history')">-- 发展历程</router-link>
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </li>
        <li>
          <router-link to="/contact" active-class="mobile-nav-hover" @click="navRouterJump">联系我们</router-link>
        </li>
      </ul>
    </div>
  </transition>
</template>

<script setup lang="ts">
import "animate.css";
import { ref, onMounted } from 'vue'
import $bus from '@/bus/index.ts'
import { useRouter } from 'vue-router'

const router = useRouter()

let showNav = ref(true) // 是否显示PC端导航
let showList = ref(false) // 是否显示pc端关于昨非的下拉列表
let showMobileNav = ref(false) // 是否显示移动端导航
let showCompile = ref(false) //移动端导航中 公司简介 导航是否高亮
let showCore = ref(false) //移动端导航中 核心价值观 导航是否高亮
let showHistory = ref(false)  //移动端导航中 发展历程 导航是否高亮

onMounted(() => {
  widthChange() // 页面第一次加载时触发一次
  window.onresize = widthChange // 窗口改变时触发该函数
})

//点击移动端导航跳转路由并隐藏导航
const navRouterJump = (flag: string) => {
  //判断是否点击了对应的导航
  if (flag == 'compile' || flag == 'core') {
    goAbout(flag) //调用跳转指定位置的函数
  }

  if (flag == 'compile') {
    //当点击 移动端的 公司简介 导航时
    showCompile.value = true //移动端导航中 公司简介 导航高亮
    showCore.value = false  //重置移动端导航中 核心价值观 导航显示状态
    showHistory.value = false  //重置移动端导航中 发展历程 导航显示状态
  } else if (flag == 'core') {
    //当点击 移动端的 核心价值观 导航时
    showCore.value = true  //移动端导航中 核心价值观 导航高亮
    showCompile.value = false  //重置移动端导航中 公司简介 导航显示状态
    showHistory.value = false  //重置移动端导航中 发展历程 导航显示状态
  }
  else if (flag == 'history') {
    goHistory()
    //当点击 移动端的 发展历程 导航时
    showHistory.value = true  //移动端导航中 发展历程 导航高亮
    showCompile.value = false  //重置移动端导航中 公司简介 导航显示状态
    showCore.value = false  //重置移动端导航中 核心价值观 导航显示状态
  } else {
    showCompile.value = false  //重置移动端导航中 公司简介 导航显示状态
    showCore.value = false  //重置移动端导航中 核心价值观 导航显示状态
    showHistory.value = false  //重置移动端导航中 发展历程 导航显示状态
  }

  showMobileNav.value = false  //收起导航
}
// 跳转关于我们页面
const goAbout = (flag: string) => {
  //跳转到about页面
  router.push({
    path: "/about"
  })
  //将该函数包裹一个定时器确保可以获取跳转页面后的指定位置的id
  setTimeout(() => {
    if (flag == 'compile') {

      let goContent = document.getElementById('compileContent')
      if (goContent) {
        goContent.scrollIntoView({
          behavior: 'smooth',//平滑滚动
          block: 'center', //将指定位置滚动到页面中间
        })
      }
    } else if (flag == 'core') {
      let goContent = document.getElementById('coreContent')
      if (goContent) {
        goContent.scrollIntoView({
          behavior: 'smooth',//平滑滚动
          block: 'center', //将指定位置滚动到页面中间
        })
      }
    }
  }, 100)
}
// 跳转发展历程页面
const goHistory = () => {
  router.push("/history")
}
// 鼠标移入关于我们时
const enterAbout = () => {
  showList.value = true
}
// 鼠标离开关于我们时
const leaveAbout = () => {
  showList.value = false
}
// 窗口宽度改变时触发
const widthChange = () => {
  let width = document.documentElement.clientWidth // 获取当前改变的窗口宽度
  if (width >= 768) {
    showNav.value = true // 显示pc端导航
    showMobileNav.value = false // 不展示移动端的导航菜单，该情况不可能存在
    // 向分页器组件传递信息展示pc端分页器
    $bus.emit('changeShowPagination', true)
  } else if (width < 768) {
    showNav.value = false // 隐藏pc端导航
    // 向分页器组件传递信息隐藏pc端分页器
    $bus.emit('changeShowPagination', false)
  }
}
// 点击移动端导航
const handleMenu = () => {
  showMobileNav.value = !showMobileNav.value
}
</script>

<style scoped lang="scss">
/* pc端导航样式 */
.header-container {
  position: fixed;
  z-index: 999;
  background-color: #fff;
  width: 100%;
  height: 96px;
  border-top: 8px solid #7689be;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-family: "Source Han Sans CN";

  .logo {
    width: 160px;
    height: 28px;
  }

  .nav {
    height: 100%;

    .content {
      display: flex;
      flex-direction: row;
      align-items: center;

      li {
        a {
          display: inline-block;
          padding: 0 16px;
          color: #666666;
          font-size: 15px;
          text-decoration: none;
          height: 88px;
          line-height: 88px;
          margin-right: 12px;
          transition: all 0.5s ease;

          &:hover {
            color: #fff;
            font-weight: 500;
            background-color: #4F68AC;
          }
        }

        .nav-active {
          background-color: #4f68ac;
          color: #fff;
        }

        .about-list {
          position: absolute;
          top: 88px;
          width: 200px;
          background-color: #4F68AC;
          padding: 0 10px;
          overflow: hidden;

          li {
            text-align: center;
            width: 100%;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            color: #fff;
            font-size: 15px;
            margin: 10px 0;
            box-sizing: border-box;
            transition: all 0.5s ease;

            &:hover {
              background-color: #fff;
              color: #4F68AC;
              font-weight: 500;
            }
          }

          &.dropDownList-enter-active {
            animation: list-enter-background 0.3s steps(60, start) alternate forwards;
            animation-timing-function: ease-in;
          }

          &.dropDownList-leave-active {
            animation: list-enter-background 0.3s steps(60, start) reverse;
            animation-timing-function: ease-in;
          }

          @keyframes list-enter-background {
            0% {
              height: 0;
            }

            100% {
              height: 140px;
            }
          }
        }
      }
    }
  }

  .menu-button {
    cursor: pointer;

    & .menu-button-hover {
      transform: rotate(90deg);
      transition: transform 0.4s ease;
    }

    & .menu-button-unhover {
      transform: rotate(0deg);
      transition: transform 0.5s ease;
    }
  }
}

/* 移动端导航样式 */
.mobile-nav {
  border-top: 1px solid #eee;
  position: fixed;
  z-index: 1000;
  top: 96px;
  background-color: #fff;
  height: 100vh;
  width: 100vw;
  padding: 40px 40px 0px 40px;
  overflow: hidden;

  li {
    font-family: "Source Han Sans CN";
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #eeeeee;

    a {
      display: block;
      width: 100%;
      height: 60px;
      line-height: 60px;
      color: #303133;
      text-decoration: none;
    }

    .mobile-nav-hover {
      color: #4F68AC !important;
    }
  }

  .inside-nav {
    padding-left: 20px;

    li {
      border-bottom: 0;

      a {
        height: 50px;
        color: #666666;
        font-weight: 400;

        &:hover {
          color: #4F68AC;
        }
      }
    }
  }
}

.mobileNav-enter-active {
  animation: mobileNav 0.4s steps(60, start) alternate forwards;
  animation-timing-function: ease-out;
}

.mobileNav-leave-active {
  animation: mobileNav 0.4s steps(60, start) reverse;
  animation-timing-function: ease-out;
}

@keyframes mobileNav {
  0% {
    transform: translateX(100vw);
  }

  100% {
    transform: translateX(0px);
  }
}
</style>